<template>
<div class="login-container">
  <!-- 导航栏 -->
<van-nav-bar class="page-nav-bar" title="登录" left-text="返回" left-arrow  @click-left="$router.go(-1)"/>
<!-- 登录表单 -->
<van-form @submit="onSubmit" ref="loginForm">
  <van-cell-group inset class="form">
    <!-- 手机号输入框 -->
    <van-field
    type="number"
    maxlength="11"
    v-model="user.mobile"
     :rules="userFormRules.mobile"
      name="手机号"
      placeholder="请输入手机号"
    > <template #left-icon>
      <i class="toutiao toutiao-shouji"></i>
      </template>
    </van-field>
    <!-- 验证码输入框 -->
    <van-field
    type="number"
    maxlength="6"
    v-model="user.code"
     :rules="userFormRules.code"
      name="验证码"
      placeholder="请输入验证码"
    ><template #left-icon>
      <i class="toutiao toutiao-yanzhengma"></i>
      </template>
     <template #button>
       <!-- 倒计时 -->
       <van-count-down :time="1000*60" format="ss 秒" v-if="isCountDownShow" @finish="isCountDownShow=false"/>
      <van-button round size="small" type="default" class="send-sms-btn" @click="onSendSms" v-else>发送验证码</van-button>
    </template>
    </van-field>
  </van-cell-group>
  <div class="login-btn-wrap">
    <van-button block type="primary" native-type="submit" class="login-btn">
      登录
    </van-button>
  </div>
</van-form>
</div>
</template>

<script>
import { login, sendSms } from '@/api/user'
import { reactive, getCurrentInstance, ref } from 'vue'
import { useStore } from 'vuex'
import { Toast } from 'vant'
import router from '@/router/index.js'

export default {
  name: 'LoginIndex',
  setup () {
    const { proxy } = getCurrentInstance()
    const store = useStore()
    const user = reactive({
      mobile: '', // 手机号
      code: ''// 验证码
    })
    const userFormRules = reactive({
      mobile: [{
        require: true,
        message: '请填写手机号'
      }, {
        pattern: /^1[3578]\d{9}$/,
        message: '手机号格式错误'
      }],
      code: [{
        require: true,
        message: '请填写验证码'
      }, {
        pattern: /^\d{6}$/,
        message: '验证码格式错误'
      }]
    })
    const isCountDownShow = ref(false)// 显示倒计时
    async function onSubmit () {
      Toast.loading({
        message: '登录中...',
        forbidClick: true, // 禁用背景点击
        duration: 0// 持续时间,0为无限
      })
      // try里是成功，catch里是失败
      try {
        const { data } = await login(user)
        store.commit('setUser', data.data)
        Toast.success('成功！')
        router.go(-1)
      } catch (err) {
        if (err.response.status === 400) {
          Toast.fail('手机号或验证码错误！')
        } else { Toast.fail('失败！') }
      }
    }
    async function onSendSms () {
      // 校验手机号
      try {
        await proxy.$refs.loginForm.validate('手机号')
      } catch (err) {
        return
      }
      // 显示倒计时
      isCountDownShow.value = true
      // 发送验证码
      try {
        await sendSms(user.mobile)
        Toast('发送成功')
      } catch (err) {
        isCountDownShow.value = false
        Toast('发送失败')
      }
    }
    return {
      onSubmit,
      onSendSms,
      user,
      userFormRules,
      isCountDownShow
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  .form{
    margin: 0;
    width: 100%;
  }
  .toutiao {
    font-size: 37px;
  }

  .send-sms-btn {
    width: 152px;
    height: 46px;
    font-size: 22px;
    color: #666;
    background: #ededed;
  }
  .login-btn-wrap{
    padding: 53px 33px;
    .login-btn{
      background-color: #6db4fb;
      border: 0;
    }
  }
}
</style>
